<template>
  <el-form :inline="true" :model="recordQuery" >

    <el-form-item label="记录名称">
      <el-input v-model="recordQuery.name" placeholder="请输入记录名称" clearable />
    </el-form-item>

    <el-form-item label="记录时间">
      <el-date-picker
          v-model="recordQuery.recordTime"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"/>
    </el-form-item>

    <el-form-item label="创建时间">
      <el-date-picker
          v-model="recordQuery.createTime"
          type="datetime"
          placeholder="请选择创建时间"
          value-format="YYYY-MM-DD HH:mm:ss"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSearch">搜 索</el-button>
      <el-button type="primary" plain @click="onReset">重 置</el-button>
    </el-form-item>
  </el-form>

  <el-button type="primary" @click="add">录入员工记录</el-button>
  <el-button type="danger" @click="batchDel">批量删除</el-button>

  <el-table
      :data="recordList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column type="index" label="序号" width="60" />
    <el-table-column property="name" label="记录名称" show-overflow-tooltip />
    <el-table-column property="startTime" label="开始时间" show-overflow-tooltip />
    <el-table-column property="endTime" label="结束时间" show-overflow-tooltip />
    <el-table-column property="createTime" label="创建时间" show-overflow-tooltip />
    <el-table-column label="操作" width="230">
      <template #default="scope">
        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
        <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"/>

</template>

<script>
import {defineComponent} from 'vue'
import {doDelete, doGet} from "../http/httpRequest.js";
import {messageConfirm, messageTip} from "../util/Util.js";

export default defineComponent({
  name: "RecordView",

  data() {
    return {
      //市场记录搜索表单对象，初始值是空
      recordQuery : {},
      //市场记录列表对象，初始值是空
      recordList : [{}],
      //分页时每页显示多少条数据
      pageSize : 0,
      //分页总共查询出多少条数据
      total : 0,
      //记录id的数组
      recordIdArray:[]
    }
  },

  mounted() {
    this.getData(1);
  },

  methods : {

    //勾选或者取消勾选时，触发该函数
    handleSelectionChange(selectionDataArray){
      console.log(selectionDataArray);
      selectionDataArray.forEach(data=>{
        let userId=data.id;
        this.recordIdArray.push(userId);
      })
    },

    //查询用户列表数据
    getData(current) {
      let startTime = ''; //开始时间
      let endTime = ''; //结束时间
      for (let key in this.recordQuery.recordTime) {
        if (key === '0') {
          startTime = this.recordQuery.recordTime[key];
        }
        if (key === '1') {
          endTime = this.recordQuery.recordTime[key];
        }
      }

      doGet("/api/records", {
        current : current, //当前查询第几页
        //6个搜索条件参数
        ownerId : this.recordQuery.ownerId,
        name : this.recordQuery.name,
        startTime : startTime,
        endTime  : endTime,
        cost : this.recordQuery.cost,
        createTime : this.recordQuery.createTime
      }).then(resp => {
        console.log(resp);
        if (resp.data.code === 200) {
          this.recordList = resp.data.data.list;
          this.pageSize = resp.data.data.pageSize;
          this.total = resp.data.data.total;
        }
      })
    },

    //分页函数(current这个参数是ele-plus组件传过来，就是传的当前页)
    toPage(current) {
      this.getData(current);
    },



    //搜索
    onSearch() {
      this.getData(1);
    },

    //搜索条件重置（清空）
    onReset() {
      this.recordQuery = {};
      this.$router.go(0)
    },

    //录入市场记录
    add() {
      this.$router.push("/dashboard/record/add");
    },

    //编辑市场记录
    edit(id){
      this.$router.push("/dashboard/record/edit/"  + id);
    },

    //查看详情
    view(id) {
      this.$router.push("/dashboard/record/" + id);
    },

    //删除单个用户
    //删除
    del (id) {
      messageConfirm("您确定要删除该数据吗？").then(() => { //用户点击“确定”按钮就会触发then函数
        doDelete("/api/record/" + id, {}).then(resp => {
          console.log(resp);
          if (resp.data.code === 200) {
            messageTip("删除成功", "success");
            //页面刷新
            this.$router.go(0)
          } else {
            messageTip("删除失败，原因：" + resp.data.msg, "error");
          }
        })
      }).catch(() => { //用户点击“取消”按钮就会触发catch函数
        messageTip("删除失败", "error");
      })
    },

    //批量删除
    batchDel() {
      if (this.recordIdArray.length <= 0) {
        //提示一下
        messageTip("请选择要删除的数据", "warning");
        return;
      }
      messageConfirm("您确定要删除这些数据吗？").then(() => { //用户点击“确定”按钮就会触发then函数
        //原来是数组：[1,3,5,6,7,11,15]  --> ids = "1,3,5,6,7,11,15";
        let ids = this.recordIdArray.join(",");
        doDelete("/api/record", {
          ids : ids
        }).then(resp => {
          console.log(resp);
          if (resp.data.code === 200) {
            messageTip("批量删除成功", "success");
            //页面刷新
            this.reload();
          } else {
            messageTip("批量删除失败，原因：" + resp.data.msg, "error");
          }
        })
      }).catch(() => { //用户点击“取消”按钮就会触发catch函数
        messageTip("取消批量删除", "warning");
      })
    }
  }
})
</script>

<style scoped>
.el-form {
  margin-bottom: 20px;
}
.el-table {
  margin-top: 12px;
}
.el-pagination {
  margin-top: 12px;
}
</style>
